<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.css" rel="stylesheet" />
		<link href="../css/header.css" rel="stylesheet" />
		<style type="text/css">
			/* #badge{
				margin-right: 230px;
				margin-right: 215px;
				margin-left: 35px;
				border-radius: 50px;
				position: absolute;
			} */
			
		</style>
	</head>

	<body>
		<!--头部标题栏 -->
		<header class="mui-bar mui-bar-nav title">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left title-color" id="pyq_out"></a>

		<a id="releasenewpyq"  class="mui-btn mui-btn-green mui-pull-right" style="color:black;font-size:14px;line-height:18px;">发表</a>
		</header>
		
		
		<div class="mui-content">
			<ul class="mui-table-view" style="margin-top: 10px;">
				<li class="mui-table-view-cell mui-media">
						<a id="link_nickname" href="javascript:;">
							<!-- <div class="mui-media-body font-style" style="padding-left: 8PX;color: grey;">
							    这一刻的想法...
							</div> -->
							<div class="mui-input-row">
								<!-- <label>Input</label> -->
								<input id="addnewpyqtext" type="search" class="mui-input-clear" placeholder="这一刻的想法..." style="background-color: #ffffff;">
								
							</div>
							<!-- <button type="button" class="mui-btn mui-btn-grey" id="badge">×</button>
							<img class="mui-media-object mui-pull-left" src="../images/ask.jpg" style="max-width: 100px;height: 100px;margin-top: 60px;margin-bottom: 35px;">
							<img class="mui-media-object mui-pull-left" src="../images/add.png" style="max-width: 100px;height: 100px;margin-top: 60px;"> -->
						</a>
					</li>
					<ul id="imgaddul" class="mui-table-view mui-grid-view mui-grid-9" style="background-color: white;">
						
					


					<li id="addimages" class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
						<img  onclick="galleryImgs()"  class="mui-media-object mui-pull-left" src="../images/add.png" style="width: 90px;height: 90px;">
					</li>
						</ul>
					
					<li class="mui-table-view-cell mui-media">
							<img class="mui-media-object mui-pull-left" src="../images/dingwei.png" style="max-width: 25px;height: 25px;margin-top: 10px;">
							<span id="span_username" class="mui-pull-right" style="color:dimgray;font-size:16px;"></span>
							<span class="mui-icon mui-icon-arrowright  mui-pull-right" style="line-height: 42px;color:dimgray;margin-left: 3px;"></span>
							<div class="mui-media-body font-style" style="padding-left: 8PX;">
							    所在位置
							</div>
						</a>
					</li>
					<li class="mui-table-view-cell mui-media">
							<img class="mui-media-object mui-pull-left" src="../images/aite.png" style="max-width: 25px;height: 25px;margin-top: 10px;">
							<span class="mui-icon mui-icon-arrowright  mui-pull-right" style="line-height: 42px;color:dimgray;margin-left: 3px;"></span>
							<div class="mui-media-body font-style" style="padding-left: 8PX;">
							   提醒谁看
							</div>
						</a>
					</li>
					<li class="mui-table-view-cell mui-media" id="promptBtn">
							<img class="mui-media-object mui-pull-left" src="../images/whom.png" style="max-width: 25px;height: 25px;margin-top: 10px;">
							<span class="mui-icon mui-icon-arrowright  mui-pull-right" style="line-height: 42px;color:dimgray;margin-left: 3px;"></span>
							<span id="span_nickname" class="mui-pull-right" style="line-height: 42px;color: dimgray;font-size: 16px;">公开</span>
							<div class="mui-media-body font-style" style="padding-left: 8PX;">
							   谁可以看
							</div>
						</a>
					</li>
					<li class="mui-table-view-cell mui-media">
							<img class="mui-media-object mui-pull-left" src="../images/kongjian.png" style="max-width: 25px;height: 25px;margin-top: 7px;margin-bottom: 5px;">
					</li>
				</ul>
		</div>
		
		
		
		
		
		
		<script src="../js/mui.js"></script>
		<script src="../js/app.js"></script>
		<script type="text/javascript">
			var imgbase64="";
			var flaggx="0";
			var j=1;
			mui.init({
				beforeback:function(){	
				var webView=plus.webview.currentWebview().opened();
				mui.fire(webView,'refrsh');
				return true;
				}
			})
						//发布			
			mui.plusReady(function() {
				
				var releasenewpyq=document.getElementById("releasenewpyq");
				releasenewpyq.addEventListener("tap",function(e){
					var user = app.getUserGlobalInfo();
					var addnewpyqtext = document.getElementById("addnewpyqtext").value;
					// console.log(JSON.stringify(user));
					console.log(JSON.stringify(user.faceImage));
					
					
					
					mui.ajax(app.serverUrl + "/user/addpyqinsert", {
						data: {
							pyquserid: user.id,
							pyquserimg:user.faceImage,
							pyqimgsrc: imgbase64,
							pyqtext:addnewpyqtext,
							pyqjurisdiction:flaggx,
							
						},
							type: 'post', //HTTP请求类型
							timeout: 10000, //超时时间设置为10秒；
							headers: {
								'Content-Type': 'application/json'
							},
							success: function(data) {
								
								if (data.status == 200) {
										
									// 页面跳转
									 mui.openWindow("new_pyq.html", "new_pyq.html");
									var myfaceWebview = plus.webview.getWebviewById("new_pyq.html");
									mui.fire(myfaceWebview, "refresh");
									
								} else {
									app.showToast(data.msg, "error");
								}
							
							}
						});
				})
				
				//查看朋友圈
				var pyq_out = document.getElementById("pyq_out");
				pyq_out.addEventListener("tap", function() {
					mui.openWindow("new_pyq.html", "new_pyq.html");
				});
			});
			
			
						var span_nickname = document.getElementById("span_nickname");
						document.getElementById("promptBtn").addEventListener('tap', function(e) {
							e.detail.gesture.preventDefault(); //修复iOS 8.x平台存在的bug，使用plus.nativeUI.prompt会造成输入法闪一下又没了
							var btnArray = ['私人', '公开'];
							mui.confirm('私人还是公开：','谁可以看', btnArray, function(e) {
								if (e.index == 1) {
									span_nickname.innerText = '公开' ;
									flaggx="0";
								} else {
									span_nickname.innerText = '私人';
									flaggx="1";
								}
							})
						});
					
					
					
			// 从相册中选择多张图片 
			
			function galleryImgs(){
				// 从相册中选择图片
				console.log("从相册中选择多张图片:");
				plus.gallery.pick( function(e){
					var imgaddul = document.getElementById("imgaddul");
					
				for(var i in e.files){
					j+=1;
					var li =document.createElement("li");
					var img= document.createElement("img");
					li.className="mui-table-view-cell","mui-media","mui-col-xs-4","mui-col-sm-3";
					imgaddul.prepend(li);
					img.className="mui-media-object","mui-pull-left";
					img.src=e.files[i];
					img.style.height='90px';
					img.style.width='90px';
					li.prepend(img);
					console.log(e.files[i]);
					
					getUrlBase64(e.files[i],"\.png",function(base64){
						imgbase64+=base64+".";
						console.log(base64);//base64编码值
						
					});
					
					if( j==9){
						var addimages=document.getElementById("addimages");
						addimages.style.display="none";
						
						
						
					}
					
				}
			}, function ( e ) {
				console.log( "取消选择图片" );
			},{filter:"image",multiple:true,maximum: 10-j,
			onmaxed:function(){
				plus.nativeUI.alert('最多只能选择9张图片');
				}
		});
}
			
				

					function getUrlBase64(url, ext, callback) {
					    var canvas = document.createElement("canvas");   //创建canvas DOM元素
					    var ctx = canvas.getContext("2d");
					    var img = new Image;
					    img.crossOrigin = 'Anonymous';
					    img.src = url;
					    img.onload = function () {
					   canvas.height = 200; //指定画板的高度,自定义
					   canvas.width = 200; //指定画板的宽度，自定义
					   ctx.drawImage(img, 0, 0, 200, 200); //参数可自定义
					        var dataURL = canvas.toDataURL("image/" + ext);
					        callback.call(this, dataURL); //回掉函数获取Base64编码
					        canvas = null;
					    };
					}
					
					

		
		
	
	
		</script>
		
	</body>

</html>
